<!--公用选择框弹窗-->
<template>
  <div>
    <BasicModal v-bind="getBindValue" @register="register" :title="modalTitle"
      :width="showSelected ? '1500px' : '1200px'" :heigth="600" wrapClassName="j-user-select-modal" @ok="handleOk"
      destroyOnClose>
      <BasicTable @register="registerTable" :scroll="{ y: 480 }" :rowSelection="rowSelection"></BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, unref, ref, watch, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage';
import {columns, searchFormSchema} from '/@/views/xl/customer_type/XlCustomerType.data';
import {list} from '/@/views/xl/customer_type/XlCustomerType.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
import { BasicColumn } from '/@/components/Table';
import { defHttp } from '/@/utils/http/axios';
import { FormSchema } from '/@/components/Table';

export default defineComponent({
  name: 'SubDeviceModal',
  components: {
    //此处需要异步加载BasicTable
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    ...selectProps,
    //是否担选
    isRadioSelection: {
      type: Boolean,
      default: true,
    },
    //排除id的集合
    excludeIdList: {
      type: Array,
      default: [],
    },
  },
  emits: ['register', 'getSelectResult'],
  setup(props, { emit, refs }) {
    // update-begin-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】查询按钮 效果不好 列表展示没有滚动条
    const tableScroll = ref<any>({ x: false });


    //查询参数
    let schemas: FormSchema[] = searchFormSchema;
    //查询接口
    var modalTitle = ref('选择门店');
    //查询接口
    var getListApi = list;

    //注册table数据
    const { tableContext } = useListPage({
      tableProps: {
        columns: columns,
        scroll: tableScroll,
        useSearchForm: true,
        api: getListApi,
        immediate: false, //是否自动加载
        formConfig: {
          labelWidth: 130,
          baseColProps: {
            xs: 24,
            sm: 8,
            md: 6,
            lg: 8,
            xl: 6,
            xxl: 6,
          },
          //update-begin-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
          actionColOptions: {
            xs: 24,
            sm: 8,
            md: 8,
            lg: 8,
            xl: 8,
            xxl: 8,
          },
          //update-end-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
          schemas: schemas,
        },
        rowSelection: { type: props.isRadioSelection ? 'radio' : 'checkbox' }, //是否单选
        // 是否显示序号列
        showIndexColumn: true,
        // 是否显示操作列
        showActionColumn: false,
        beforeFetch: (params) => {
          return Object.assign(params, queryParams.value);
        },
        afterFetch: afterFetch,
      },
    });

    const [registerTable, { reload, setProps, getDataSource, getSelectRowKeys, getSelectRows }, { rowSelection, selectedRowKeys, selectedRows }] =
      tableContext;

    //过滤id
    var filterList = ref([]);
    //查询条件
    var queryParams = ref({});
    //注册弹框
    const [register, { closeModal }] = useModalInner(async (data) => {
      if (window.innerWidth < 900) {
        tableScroll.value = { x: 900 };
      } else {
        tableScroll.value = { x: false };
      }
      //判断是否有过滤数据
      if (data.filterList) {
        filterList.value = data.filterList;
      }
      //update-begin-author:taoyan date:2022-6-2 for: VUEN-1112 一对多 未显示选择条数，及清空
      setTimeout(() => {
        if (selectedRowKeys) {
          selectedRowKeys.value = [];
        }
        console.log('selectData', data);
        // 隐藏底部时禁用整个表单
        setProps({
          api: getListApi,
          columns: columns,
          formConfig: {
            labelWidth: 130,
            baseColProps: {
              xs: 24,
              sm: 8,
              md: 6,
              lg: 8,
              xl: 6,
              xxl: 6,
            },
            //update-begin-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
            actionColOptions: {
              xs: 24,
              sm: 8,
              md: 8,
              lg: 8,
              xl: 8,
              xxl: 8,
            },
            //update-end-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
            schemas: schemas,
          },
        });
        reload();
      }, 100);

      //update-end-author:taoyan date:2022-6-2 for: VUEN-1112 一对多 未显示选择条数，及清空
    });
    // update-end-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】 查询按钮 效果不好 列表展示没有滚动条
    const attrs = useAttrs();
    //表格配置
    const config = {
      canResize: false,
      bordered: true,
      size: 'small',
    };
    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);

    const searchInfo = ref(props.params);
    // update-begin--author:liaozhiyang---date:20230811---for：【issues/657】右侧选中列表删除无效
    watch(rowSelection.selectedRowKeys, (newVal) => {
      //update-begin---author:wangshuai ---date: 20230829  for：null指针异常导致控制台报错页面不显示------------
      if (selectedRowKeys) {
        selectedRowKeys.value = newVal;
      }
      //update-end---author:wangshuai ---date: 20230829 for：null指针异常导致控制台报错页面不显示------------
    });
    // update-end--author:liaozhiyang---date:20230811---for：【issues/657】右侧选中列表删除无效

    /**
     * 确定选择
     */
    function handleOk() {
      // getSelectResult((options, values) => {
      //回传选项和已选择的值
      emit('getSelectResult', selectedRowKeys.value, selectedRowKeys.value, selectedRows);
      //关闭弹窗
      closeModal();
      // });
    }

    /**
     * 返回结果逻辑查询
     */
    function afterFetch(record) {
      let excludeList = props.excludeIdList || filterList.value;
      if (!excludeList || excludeList.length < 1) {
        excludeList = filterList.value;
        if (!excludeList || excludeList.length < 1) {
          return record;
        }
      }
      let arr: any[] = [];
      //如果存在过滤用户id集合，并且后台返回的数据不为空
      if (excludeList.length > 0 && record && record.length > 0) {
        for (let item of record) {
          if (excludeList.findIndex((f) => f.id === item.id) < 0) {
            arr.push({ ...item });
          }
        }
        return arr;
      }
      return record;
    }

    return {
      //config,
      handleOk,
      searchInfo,
      register,
      getBindValue,
      getListApi,
      ...props,
      columns,
      schemas,
      modalTitle,
      rowSelection,
      getSelectRows,
      tableScroll,
      registerTable,
      afterFetch,
    };
  },
});
</script>
../../data/SubDeviceData.js
